<template>
  <!-- 视频 -->

  <div class="box">

    <div class="items">
      <div class="item" v-for="(item, index) in  datalist" :key="index" @click="toMv(item.id)">
        <div class="img-wrap">
          <img :src="item.cover" alt="" />
          <div class="num-wrap">
            <div class="iconfont icon-play"></div>
            <div class="num">{{ item.playCount }}</div>
          </div>
        </div>
        <div class="info-wrap">
          <div class="singer">{{ item.artistName }}</div>
          <div class="singer">{{ item.name |ellipsis}}</div>
        </div>
      </div>
    </div>
    <div class="d"></div>
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 130px;
  left: 200px;
}
.box1 {
  height: 170px;
  width: 800px;
  border: 1px solid #000;
}
.items {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
}
.img-wrap img {
  padding: 10px;
  width: 300px;
}
.info-wrap {
  padding: 0 10px;
}
.d {
  height: 200px;
}
.img-wrap {
  position: relative;
}
.img-wrap .num-wrap .num {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
}
</style>
<script>
import { API } from "../../common/constant";
import axios from "axios";
export default {
  data() {
    return {
      datalist: [],
    };
  },
  created() {
    this.mv();
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 15) + "...";
      }
      return value;
    },
  },
  methods: {
    toMv(id) {
      this.$router.push(`/video2?q=${id}`);
    },
    mv() {
      axios({
        // 请求的地址
        url: `${API}/top/mv`,
        // 请求的方法
        method: "get",
        params: {
          keywords: this.$route.query.q,

          type: 1,
          limit: this.num,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.datalist = res.data.data;
        for (let i = 0; i < this.datalist.length; i++) {
          if (this.datalist[i].playCount > 100000) {
            this.datalist[i].playCount =
              parseInt(this.datalist[i].playCount / 10000) + "万";
          }
        }
      });
    },
  },
};
</script>
